<template>
    <div class="order_tool_wp">
        <span class="user_info">{{ userInfo.bh }}
            博富，权益：{{ userInfo.quanyi }}，可用：{{ userInfo.keyong }}，使用率：{{ userInfo.shiyognlv }}%</span>
        <span class="shop_name">{{ storeMain?.classHeyue['外盘']?.find(item => item.heyue_bh == orderInfo.heyueBh)?.heyue_name
        }}</span>
        <i class="iconfonMy icon-24gl-lock2" title="锁定" v-if="orderInfo.isSuoDIng" @click="orderInfo.isSuoDIng = false"></i>
        <i class="iconfonMy icon-24gl-unlock4" title="非锁定" v-else @click="orderInfo.isSuoDIng = true"></i>
        <span class="shou_shu">手数</span>
        <i class="iconfonMy icon-zhuanhuan"></i>
        <input class="shou_num" type="number" v-model="orderInfo.buynum" min="1" step="1">
        <el-popover placement="bottom" :width="205" trigger="click" popper-style="padding:5px;" :visible="visible">
            <template #reference>
                <span class="Jia_ge" @click="visible = !visible">价格...</span>
            </template>
            <div>
                <span :style="jiage_btn" @click="selectKuaiJieJia('市价')">市价</span>
                <span :style="jiage_btn" @click="selectKuaiJieJia('对手价')">对手价</span>
                <span :style="jiage_btn" @click="selectKuaiJieJia('最新价')">最新价</span>
            </div>
        </el-popover>
        <div class="parice_num">
            <input type="number" v-model="orderInfo.buyPaice" min="0" :step="bodongVal" @focus="orderInfo.kuaijie = null">
            <span @click="orderInfo.kuaijie = null" v-if="orderInfo.kuaijie">{{ orderInfo.kuaijie }}</span>
        </div>
        <div class="btns">
            <span class="b1" @click="buyShop(1)">加多</span>
            <span class="b2" @click="buyShop(2)">加空</span>
            <span class="b3" @click="buyShop(3)">平仓</span>
            <span class="b3" @click="buyShop(4)">撤单</span>
        </div>
        <!-- <span class="ke_kai">可开&lt;=159 </span>
        <span class="kong_cang">空仓=159（价差：-1.0） </span> -->
    </div>
</template>

<script setup>
const { ref, computed } = require('vue')
const { ipcRenderer } = require('electron');
import { mainStore } from '@/store/index.js'
import { throttle } from 'lodash';
import { ElNotification } from 'element-plus';



const storeMain = mainStore()


const visible = ref(false)
const heyueData = ref([])
const orderInfo = ref({
    heyueBh: '',
    isSuoDIng: false,
    buynum: 1,
    buyPaice: 0,
    kuaijie: '市价'
})

const userInfo = ref({
    bh: '',
    quanyi: '',
    keyong: '',
    shiyognlv: 0,
})

ipcRenderer.on('right_click_msg_win', async (e, v) => {
    if (v.type == '下单信息传输' && !orderInfo.value.isSuoDIng) {
        orderInfo.value = { ...orderInfo.value, ...JSON.parse(v.orderInfo) }
        heyueData.value = JSON.parse(v.heyueData)
    }
    if (v.type == '个人信息传输') {
        userInfo.value = JSON.parse(v.userInfo)
    }
    if (v.type == '提交信息接收') {
        ElNotification(v.msg)
    }
})

const jiage_btn = ref(
    "border-radius: 2px;display: inline-block;width:60px;background-color: #fdfdfd;border: 1px solid #d0d0d0;text-align: center; margin: 2px; line-height: 20px;font-size:12px;")

const buyShop = throttle(async function (status) {
    ipcRenderer.send('placeAnOrderWindow_click_msg', {
        type: '工具条下单',
        orderInfo: JSON.stringify(orderInfo.value),
        status: status
    })
}, 1000)

const bodongVal = computed(() => {
    if (heyueData.value.length > 0 && orderInfo.value.heyueBh) {
        let hy = heyueData.value,
            SPI = orderInfo.value
        return hy[hy.findIndex(item => item['合约代号'] == SPI.heyueBh)]['最小波动']
    }
    return 0
})

function selectKuaiJieJia(v) {
    orderInfo.kuaijie = v
    visible.value = false
}

</script>

<style scoped lang="less">
.order_tool_wp {
    background-color: #23262a;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    height: 32px;
    padding-left: 32px;
    font-size: 14px;
    min-width: 900px;

    .user_info {
        width: 32.5%;
        min-width: 32.5%;
    }

    .shop_name {
        color: #efef80;
        width: 7%;
        text-align: right;
        min-width: 7%;

    }

    .icon-24gl-lock2,
    .icon-24gl-unlock4 {
        margin: 0 10px 0 5px;
    }

    .shou_shu {
        padding: 0 8px;
        font-size: 12px;
        min-width: 40px;
    }

    .icon-zhuanhuan {
        font-size: 13px;
        margin-right: 8px;
    }

    .shou_num {
        height: 24px;
        width: 60px;
        margin-right: 10px;
        font-size: 12px;
        font-weight: bold;
    }

    .Jia_ge {
        font-size: 12px;
        margin-right: 4px;
        min-width: 45px;
    }

    .parice_num {
        position: relative;

        input {
            height: 24px;
            width: 77px;
            font-size: 12px;
            font-weight: bold;
        }

        span {
            background-color: #fff;
            position: absolute;
            color: #000;
            left: 1px;
            top: 0.5px;
            line-height: 23px;
            width: 60px;
            cursor: text;
            z-index: 100;
        }
    }

    .btns {
        min-width: 260px;

        span {
            display: inline-block;
            border-radius: 1px;
            background: #fdfdfd;
            line-height: 20px;
            width: 54px;
            text-align: center;
            margin-left: 11px;
        }

        .b1 {
            background-color: #c74547;
        }

        .b2 {
            background-color: #409e60;
        }

        .b3 {
            background-color: #d7e3f1;
            color: #000;
        }
    }

    .ke_kai {
        text-align: center;
        width: 9%;
        min-width: 9%;
    }

    .kong_cang {
        width: 14%;
        min-width: 14%;
    }
}
</style>
